<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Activity" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="Timeline" name="timeline">
                <time-line />
              </el-tab-pane>
              <el-tab-pane label="Account" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Profile'
}
</script>
<script setup>
import { getCurrentInstance, ref } from 'vue'

// 在setupz中使用mapGetters的Hooks
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import TimeLine from './components/Timeline'
import Account from './components/Account'

const { proxy } = getCurrentInstance()

const { name, avatar, roles } = proxy.$useGetters('', ['name', 'avatar', 'roles'])

let user = ref({})
const activeTab = ref('activity')

const getUser = () => {
  user = {
    name: name.value,
    role: roles.value.join(' | '),
    email: 'admin@test.com',
    avatar: avatar.value
  }
}

getUser()

</script>

<style scoped>

</style>
